<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="include/header.jsp" %>
<head>
    <script src="${pageContext.request.contextPath}/res/js/jquery-color-2.1.2.js"></script>
    <script src="${pageContext.request.contextPath}/res/js/fore/fore_home.js"></script>
    <link href="${pageContext.request.contextPath}/res/css/fore/fore_home.css" rel="stylesheet"/>
    <title>tmall.com--理想生活</title>
</head>
<body>
<nav>
    <%@ include file="include/navigator.jsp" %>
    <div class="header">
        <img src="${pageContext.request.contextPath}/res/images/fore/WebsiteImage/HomeLogoA.png">
        <div class="mallSearch">
            <form action="${pageContext.request.contextPath}/product" method="get">
                <div class="mallSearch-input">
                    <input class="header_search_input" type="text" name="product_name" placeholder="搜索 商品"
                           maxlength="50">
                    <input class="header_search_button" type="submit" value="搜索">
                </div>
            </form>
            <ul>
                <c:forEach items="${requestScope.categoryList}" var="category" varStatus="i">
                    <c:if test="${i.index<9}">
                        <li><a href="${pageContext.request.contextPath}/product?category_id=${category.category_id}"
                                <c:if
                                test="${i.index % 2 != 0}"> style="color: #FF0036"</c:if>>${fn:substring(category.category_name,0,fn:indexOf(category.category_name,' /'))}</a>
                        </li>
                    </c:if>
                </c:forEach>
            </ul>
        </div>

        <div class="notice">
            <div class="notice_top">
                <div class="notice_top_left">
                    <span>公告</span>
                </div>
                <div class="notice_top_right" style="color: #666">
                    新鲜事儿都在这里～
                </div>
            </div>
            <div class="notice_down">
                <c:forEach items="${requestScope.notices}" var="notice" varStatus="i">

                    <div class="notice_content${i.count + 1}">
                        <a href="${notice.noticeContent}" style="text-decoration: none">
                            <span class="hotspot">热点</span>
                            <span class="content">${notice.noticeTitle}</span>
                        </a>
                    </div>
<%--                    <div class="notice_content2">--%>
<%--                        <span class="hotspot">热点</span>--%>
<%--                        <span class="content">第二条公告</span>--%>
<%--                    </div>--%>
<%--                    <div class="notice_content3">--%>
<%--                        <span class="hotspot">热点</span>--%>
<%--                        <span class="content">第三条公告</span>--%>
<%--                    </div>--%>
                </c:forEach>
            </div>
        </div>

    </div>
    <div class="home_nav">
        <div class="home_nav_title">
            <img src="${pageContext.request.contextPath}/res/images/fore/WebsiteImage/header_nav_title.png">
            <span>商品分类</span>
        </div>

    </div>
</nav>
<div class="banner">

       <c:forEach var="product" items="${requestScope.specialProductList}" varStatus="i">

           <img src="${pageContext.request.contextPath}/res/images/item/productSinglePicture/${product.productimage_src}" width="1000px" height="500px"
                name="${product.product_id}" id="banner${i.count}"
                <c:if test="${i.count == 1}">style="display: block;"</c:if> />
       </c:forEach>
</div>
<div class="banner_main">
    <ul class="banner_nav">
        <c:forEach items="${requestScope.categoryList}" var="category">
            <li data-toggle="${category.category_id}" data-status="">
                <img src="${pageContext.request.contextPath}/res/images/item/categoryPicture/${category.category_image_src}">
                <a href="${pageContext.request.contextPath}/product?category_id=${category.category_id}">${category.category_name}</a>
                <div class="banner_div" name="${category.category_name}">

                </div>
            </li>
        </c:forEach>
    </ul>

    <c:if test="${fn:length(requestScope.specialProductList)>0}">
       <ul class="banner_slider">
          <c:forEach items="${requestScope.specialProductList}"  varStatus="status">
             <li id="slider_${status.count + 1}"></li>
          </c:forEach>
       </ul>
    </c:if>
    <a href="#"></a>
</div>
<div class="banner_do">
    <div class="banner_goods">
        <c:forEach items="${requestScope.categoryList}" var="category">
            <c:if test="${fn:length(category.productList)>0}">
                <div class="banner_goods_type">
                    <div class="banner_goods_title">
                        <span></span>
                        <p><a href="${pageContext.request.contextPath}/product?category_id=${category.category_id}">${category.category_name}</a></p>
                    </div>
                    <div class="banner_goods_items">
                        <c:forEach items="${category.productList}" var="product" varStatus="i">
                            <c:if test="${i.index<8}">
                                <div class="banner_goods_item">
                                    <a href="product/${product.product_id}" class="goods_link"></a>
                                    <img src="${pageContext.request.contextPath}/res/images/item/productSinglePicture/${product.singleProductImageList[0].productImage_src}">
                                    <a href="product/${product.product_id}"
                                       class="goods_name">${product.product_name}</a>
                                    <span class="goods_price">￥${product.product_sale_price}</span>
                                </div>
                            </c:if>
                        </c:forEach>
                    </div>
                </div>
            </c:if>
        </c:forEach>
    </div>
    <div class="endDiv"></div>
</div>
<%@ include file="include/footer_two.jsp" %>
<%@ include file="include/footer.jsp" %>
</body>